<template>
  <div class="m-header" :class="showUser ? 'action' : ''" :style="Style">
    <div class="action icon" @click="$emit('openDrawer')">
      <icon-svg icon-class="more" />
    </div>
    <div class="content">
      <transition name="slide">
        <div class="logo" key="logo" v-if="!showUser">
          <icon-svg class="icon" icon-class="yinyue" />
          <span class="text-bold">S1mple Music</span>
        </div>
        <div class="user" key="user" v-else>
          <img class="avatar" v-if="hasLogin" width="23" :src="User.avatar">
          <span class="text-bold" v-text="hasLogin ? User.name : '请登录'" />
        </div>
      </transition>
    </div>
    <router-link tar="div" to="/search" class="action">
      <icon-svg icon-class="search" />
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'm-header',
  props: {
    scrollY: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      show: true
    }
  },
  computed: {
    User () {
      return this.$store.state.user
    },
    hasLogin () {
      return !!this.User.userId
    },
    showUser () {
      return this.scrollY < -86 && this.$route.path === '/my'
    },
    Themes () {
      return this.$store.state.Themes
    },
    StatusBarHeight () {
      return this.$store.state.StatusBarHeight
    },
    Style () {
      return {
        paddingTop: this.StatusBarHeight + 'px'
      }
    }
  }
}
</script>

  <style lang="less" scoped>
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .m-header {
    width: 100%;
    height: 44px;
    line-height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: background-color .3s;
    background: @color-background;
    color: @color-text;
    z-index: 50;
    .content {
      height: 44px;
      flex: 1;
      position: relative;
      .logo, .user {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .logo { .logo-font() }
      .user {
        .avatar {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          display: inline-block;
        }
      }
      .icon, .avatar {
        font-size: @font-size-large-x;
        margin: 3px;
      }
    }
    .action {
      height: 100%;
      padding: 0 15px;
      display: flex;
      align-items: center;
      color: @color-text;
      .icon-svg {
        font-size: 25px;
      }
    }
    .icon { color: @color-text }
  }
  .m-header.action {
    background: @color-background-d;
    .icon-svg {
      font-size: 30px;
    }
  }

  .slide-enter-active, .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter, .slide-leave-to {
    opacity: 0;
  }
  .logo.slide-enter, .logo.slide-leave-to {
    transform: translateY(-100%);
  }
  .user.slide-enter, .user.slide-leave-to {
    transform: translateY(100%);
  }

</style>
